<template>
    <el-form :model="empForm" :inline="true">
        <el-form-item label="姓名">
            <el-input v-model="empForm.name" style="width: 120px;" placeholder="请输入员工姓名" />
        </el-form-item>
        <el-form-item label="账号">
            <el-input v-model="empForm.account" style="width: 120px;" placeholder="请输入员工账号" />
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="empForm.gender" style="width: 100px;" placeholder="请选择">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="离职时间">
            <el-date-picker v-model="empForm.date" clearable type="daterange"  value-format="YYYY-MM-DD" 
                placeholder="选择日期" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期"
                style="width: 350px; margin-left: 10px"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getEmpResignMessage">查询</el-button>
            <el-button type="info" @click="clearEmpForm">清空</el-button>
        </el-form-item>
    </el-form>
    <div style="justify-content: space-between;margin-top: 10px;">
        <el-button type="primary" @click="passEmpResignStatus(null)">批量通过</el-button>
        <el-button type="danger" @click="notPassEmpResignStatus(null)">批量不通过</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%;margin-top: 10px;"
        @selection-change="getEmpResignMessageBySelectedId">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="id" width="55" />
        <el-table-column property="name" label="员工姓名" width="130" />
        <el-table-column property="gender" label="员工性别" width="130">
            <template #default="scope">
                <span v-if="scope.row.gender === 1">男</span>
                <span v-else-if="scope.row.gender === 2">女</span>
            </template>
        </el-table-column>
        <el-table-column property="account" label="员工账号" width="130" />
        <el-table-column property="applyDate" label="申请日期" width="130" />
        <el-table-column property="resignDate" label="离职时间" width="150" />
        <el-table-column property="resignDocument" label="离职申请文件" width="200">
            <template #default="scope">
                <el-link type="primary" :underline="false" :href="scope.row.resignDocument">
                    {{ scope.row.resignDocument }}
                </el-link>
            </template>
        </el-table-column>
        <el-table-column property="approveStatus" label="审批状态" width="120">
            <template #default="scope">
                <span v-if="scope.row.approveStatus === 0">审批中</span>
                <span v-else-if="scope.row.approveStatus === 1">通过</span>
                <span v-else-if="scope.row.approveStatus === 2">不通过</span>
            </template>
        </el-table-column>
        <el-table-column label="审批操作">
            <template #default="scope">
                <el-link style="margin-right: 10px;" target="_blank" @click="passEmpResignStatus(scope.row.id)">通过</el-link>
                <el-link type="danger" @click="notPassEmpResignStatus(scope.row.id)">不通过</el-link>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 10px;">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import type { ComponentSize, FormInstance } from 'element-plus'
import axios from '@/utils/request'
const size = ref<ComponentSize>('default')
const currentPage = ref(1)
const pageSize = ref(10)
const disabled = ref(false)
const tableData = ref([])
const background = ref(true)
const total = ref(0)
let empForm = ref({
    name: '',
    account: '',
    date: ['', ''],
    gender: ''
})
// 选中的表格数据
const empResignMessage = ref([])
// 选中的表格数据的id
const empResignMessageId = ref([])
// 选中的表格数据的id
const getEmpResignMessageBySelectedId = (selectedRows: any) => {
    //数组中放入表格信息
    empResignMessage.value = selectedRows;
    // 清空数组
    empResignMessageId.value = [];
}
// 清空表单
const clearEmpForm = () => {
    empForm.value.name = '';
    empForm.value.account = '';
    empForm.value.date = ['', ''];
    empForm.value.gender = '';
    getEmpResignMessage()
}
//页面展示信息数发生改变
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    getEmpResignMessage()
}
//当前页数发生改变
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    getEmpResignMessage()
}
//打开页面就挂载 展示所有的离职信息
onMounted(() => {
    getEmpResignMessage()
})
const getEmpResignMessage = async () => {
    try {
        const result = await axios.get(`/admin/resigns?page=${currentPage.value}&pageSize=${pageSize.value}&name=${empForm.value.name}&account=${empForm.value.account}
        &gender=${empForm.value.gender}&startDate=${empForm.value.date[0]}&endDate=${empForm.value.date[1]}`)
        if (result.data.code === 1) {
            tableData.value = result.data.data.rows;
            total.value = result.data.data.total;
            if (empForm.value.name != '' || empForm.value.gender != '' || empForm.value.account != '' || empForm.value.date[0] != '' || empForm.value.date[1] != '') {
                ElMessage.success('查询成功');
            }
        } else {
            ElMessage.error('获取离职信息失败');
        }
    } catch (error) {
        console.error('获取离职信息时发生错误:', error);
        ElMessage.error('获取离职信息时发生错误，请检查网络或联系后台管理员');
    }
}
// 管理员对于员工离职审批为通过
const passEmpResignStatus = async (id: number) => {
    //误触判断
    const isConfirmed = window.confirm('确认该操作吗?')
    if (!isConfirmed) {
        return
    }
    //判断单个通过还是批量通过
    if (id) {
        empResignMessageId.value = [id]
    } else if (id === null && empResignMessage.value.length === 0) {
        ElMessage.error('请选择要审批通过的员工')
        return
    }
    else if (id === null && empResignMessageId.value.length === 0 && empResignMessage.value.length > 0) {
        empResignMessage.value.forEach((item: any) => { empResignMessageId.value.push(item.id) })
    }
    //发送put请求,发送的是数组
    try {
        const result = await axios.put('/admin/resigns', {
            ids: empResignMessageId.value.join(','),
            approveStatus: 1
        })
        if (result.data.code === 1) {
            ElMessage.success('操作成功')
            // 重新获取数据
            getEmpResignMessage()
        } else {
            ElMessage.error('操作失败')
        }
    }
    catch (error) {
        console.error('操作失败:', error)
        ElMessage.error('操作失败，请检查网络或联系后台管理员')
    }
}
// 管理员对于员工离职审批为不通过
const notPassEmpResignStatus = async (id: number) => {
    //误触判断
    const isConfirmed = window.confirm('确认该操作吗?')
    if (!isConfirmed) {
        return
    }
    //判断单个通过还是批量通过
    if (id) {
        empResignMessageId.value = [id]
    } else if (id === null && empResignMessage.value.length === 0) {
        ElMessage.error('请选择审批不通过的员工')
        return
    }
    else if (id === null && empResignMessage.value.length > 0) {
        empResignMessage.value.forEach((item: any) => { empResignMessageId.value.push(item.id) })
    }
    //发送put请求,发送的是数组
    try {
        const result = await axios.put('/admin/resigns', {
            ids: empResignMessageId.value.join(','),
            approveStatus: 2
        })
        if (result.data.code === 1) {
            ElMessage.success('操作成功')
            // 重新获取数据
            getEmpResignMessage()
        } else {
            ElMessage.error('操作失败')
        }
    }
    catch (error) {
        console.error('操作失败:', error)
        ElMessage.error('操作失败，请检查网络或联系后台管理员')
    }
}
</script>


<style></style>